<template>
  <div>
    <div class="col-xs-12">
      <div class="input-group input-group-lg">
        <span class="input-group-addon">Plugin URL</span>
        <input
          v-model="pluginURL"
          type="text"
          class="form-control input-text"
          placeholder="https://someurl.com/some-path/some-plugin.jar"
        />
        <span class="input-group-btn">
          <a class="btn btn-cta" type="button" @click="submitUrl">Install</a>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import { mapActions } from "vuex";

import { client } from "../../../../library/modules/rundeckClient";
export default defineComponent({
  name: "PluginUrlUploadForm",
  data() {
    return {
      pluginURL: "",
    };
  },
  methods: {
    ...mapActions("overlay", ["openOverlay"]),
    submitUrl() {
      this.openOverlay({
        loadingMessage: "Installing",
        loadingSpinner: true,
      });
      client
        .sendRequest({
          baseUrl: window._rundeck.rdBase,
          pathTemplate: `/plugin/installPlugin`,
          queryParameters: {
            pluginUrl: this.pluginURL,
          },
          method: "POST",
        })
        .then((response) => {
          if (response.status === 200) {
            this.openOverlay({});
            if (response.parsedBody.err) {
              this.$alert({
                title: "Error Uploading",
                content: response.parsedBody.err,
              });
            } else {
              this.$alert({
                title: "Plugin Installed",
                content: response.parsedBody.msg,
              });
            }
          } else if (response.status >= 300) {
            this.openOverlay({});
            let message = `Error: ${response.status}`;
            if (response.parsedBody && response.parsedBody.message) {
              message = response.parsedBody.message;
            } else if (response.parsedBody && response.parsedBody.error) {
              message = response.parsedBody.error;
            }
            this.$alert({
              title: "Error Uploading",
              content: message,
            });
          }
        });
    },
  },
});
</script>
<style lang="scss" scoped>
.input-text {
  padding: 0 var(--spacing-6);
}
</style>
